
			

<template>
	<div class="professionMaternity">
		<!--专业月嫂二级页面-->
		<div style="width: 100%;position: relative;display: flex;justify-content: center;">
			<img class="banner"  src="../../../../static/img/banner_professionMaternity.png" />
			<div style="margin:0 auto;position: absolute;top: 40%;text-align: center;color: white;color: #FFFFFF;">
				<p class="banner-title" >专业月嫂</p>
				<p class="banner-text" >BABY&SITTER</p>
			</div>
		</div>
		<div class="filter small-hiddle">
			<div class="filter-body">
				<Row  type="flex"  align="middle" style="padding: 5px;">
					<Col span="2" style="font-size: 16px;font-weight: 600;">
						<Icon type="md-pin" />
						地区:
					</Col>
					<Col span="22">
						<span v-for="item,index in 10" :key="index" style="font-size: 15px;padding: 10px;">
							厦门
						</span>
					</Col>
				</Row>
				<Row  type="flex"  align="middle" style="padding: 5px;">
					<Col span="2" style="font-size: 16px;font-weight: 600;">
						<Icon type="logo-buffer" />
						类型:
					</Col>
					<Col span="22">
						<span v-for="item,index in 10" :key="index" style="font-size: 15px;padding: 10px;">
							育儿嫂
						</span>
					</Col>
				</Row>
				<Row  type="flex"  align="middle" style="padding: 5px;">
					<Col span="2" style="font-size: 16px;font-weight: 600;">
						<Icon type="md-home" />
						籍贯:
					</Col>
					<Col span="22">
						<span v-for="item,index in 20" :key="index" style="font-size: 15px;padding: 10px;">
							北京
						</span>
					</Col>
				</Row>
				<Row  type="flex"  align="middle" style="padding: 5px;">
					<Col span="2" style="font-size: 16px;font-weight: 600;">
						<Icon type="ios-color-filter" />
						年龄:
					</Col>
					<Col span="22">
						<span v-for="item,index in 10" :key="index" style="font-size: 15px;padding: 10px;">
							22~25
						</span>
					</Col>
				</Row>
			</div>
		</div>
		<div class="hiddle">
			<Row  type="flex"  align="middle" style="padding: 5px;">
				<Col span="6" >
					<span>
						<Select v-model="model1" >
					        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
					</span>
				</Col>
				<Col span="6" >
					<span>
						<Select v-model="model1" >
					        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
					</span>
				</Col>
				<Col span="6" >
					<span>
						<Select v-model="model1" >
					        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
					</span>
				</Col>
				<Col span="6" >
					<span>
						<Select v-model="model1" >
					        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					    </Select>
					</span>
				</Col>
			</Row>
		</div>
		
		<div class="body">
			<div class="body-card">
				<Row type="flex" align="middle" >
					<Col v-for="(item,index) in 5" :key="index" :xs="12" :lg="6">
						<div style="width: 100%;max-height: 480px;">
							<div class="body-card-width body-card-subscribe">
								<img class="body-card-img" style="width: 100%;display: block;" src="../../../../static/img/person.png"/>
								<div class="body-card-bottom" style="text-align: center;padding: 10px;background-color: white;">
									<p class="body-title">
										刘阿姨
									</p>
									<p class="body-card-text" style="width: 80%;margin:0 auto;">
										50岁|湖北|5年经验
									</p>
									<p class="body-card-text" style="width: 80%;margin:0 auto;">
										住家;家务
									</p>
									<p style="font-size: 20px;padding: 10px 0px;color: #f78c05;">
										￥5000-6000/月
									</p>
									<div class="body-card-buttom" @click="goMaternityInfo" style="cursor: pointer;padding: 5px 10px;color: #f78c05;border: 1px solid #f78c05;width: 150px;margin: 0 auto;">
										立刻预约
									</div>
								</div>
							</div>
						</div>
					</Col>
				</Row>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				model1:"",
				cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                ],
			}
		},
		methods:{
			goMaternityInfo:function(){
				this.$router.push("/professionMaternity/maternityInfo")
			},
		}
	}
</script>

<style lang="css" scoped> 
	/*电脑*/
	@media only screen and (min-width: 540px){
		.professionMaternity >>> .banner-title{
			font-size: 50px;
			text-shadow: 1px 1px 1px #000000
		}
		.professionMaternity >>> .banner-text{
			font-size: 28px;
			text-shadow: 1px 1px 1px #000000
		}
		.professionMaternity >>> .banner{
			width: 100%;
			height: 300px;
		}
		.professionMaternity >>> .filter{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.professionMaternity >>> .filter-body{
			width: 1200px;
			height: auto;
			padding: 20px;
		}
		.professionMaternity >>> .body-title{
			font-size: 22px;
			padding: 5px 5px;
		}
		.professionMaternity >>> .body{
			width: 100%;
			background-color: #f7f7f7;
		}
		.professionMaternity >>> .body-card{
			padding-top: 10px;
			width: 1200px;
			margin: 0 auto;
		}
		.professionMaternity >>> .body-card-width{
			height: 450px;
			margin:15px;
			background-color: white;
		}
		/*.body-card-subscribe{
			display: none;
			position: relative;
			top: 0px;
			transition: all 0.5s;
		}
		.body-card-subscribe-hidden{
			display: none;
		}
		
		.body-card-subscribe:hover .body-card-subscribe-hidden{
			display: block;
			top: -4px;
		}*/
		.professionMaternity >>> .hiddle{
			display: none !important;	
		}
		.professionMaternity >>> .body-card-buttom{
			display: none;	
		}
		.professionMaternity >>> .body-card-width:hover .body-card-buttom{
			display: block;	
		}
		.professionMaternity >>>  .body-card-bottom{
			transition: all 0.3s;
			position: relative;
			top: 0px;
		}
		.professionMaternity >>> .body-card-width:hover .body-card-bottom{
			position: relative;
			top: -40px;
		}
		.professionMaternity >>> .body-card-img{
			height: 280px;
		}
		.professionMaternity >>> .body-card-buttom{
			width: 210px !important;
			height: 34px;
		}
		
	}
	/*手机*/
	@media only screen and (max-width: 540px) {
		.professionMaternity >>> .banner-title{
			font-size: 28px;
			text-shadow: 1px 1px 1px #000000
		}
		.professionMaternity >>> .banner-text{
			font-size: 18px;
			text-shadow: 1px 1px 1px #000000
		}
		.professionMaternity >>> .banner{
			width: 100%;
			height: 150px;
		}
		.professionMaternity >>> .ivu-select-selection{
			border: 0px !important;
		}
		.professionMaternity >>> .body-card{
			width: 100%;
			background-color: #f7f7f7;
		}
		.professionMaternity >>> .body-title{
			font-size: 16px;
			padding: 5px 10px;
		}
		.professionMaternity >>> .body-card-width{
			margin:5px;
			background-color: white;
		}
		.professionMaternity >>> .body-card-text{
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.professionMaternity >>> .small-hiddle{
			display: none !important;	
		}
	}
</style>